<template>
	<view class="jg-index">
		<u-navbar title="机构端" back-icon-name="close" back-icon-size="30">
			<view slot="right" style="margin-right: 10upx;margin-top: 10upx;">
				<u-icon name="../../static/gdlb.png" size="35" style="margin-right: 20upx;" @click="Workorder"></u-icon>
			</view>
		</u-navbar>
		<view class="content">
			<view class="site-header">
				<view class="site-header-left">
					<view style="display: flex;align-items: center;">
						<view class="site-header-font">总计收入</view>
						<image src="../../static/huabanfuben.png" style="width: 25upx;height: 16upx;margin-left: 25upx;"/>
					</view>
					<view class="font-36" style="margin-top: 5upx;">5498.00</view>
				</view>
				<image src="../../static/xdf.png" style="width: 88upx;height: 88upx;"></image>
			</view>
			<view class="subtransactions-header">
				<view class="subtransactions-left">
					<view style="font-size: 24upx;">成单率</view>
					<view class="font-36">80%</view>
				</view>
				<view class="vertical-offset"></view>
				<view class="subtransactions-right">
					<view style="font-size: 24upx;">工单数</view>
					<view class="font-36">43</view>
				</view>
			</view>
		</view>
		<view class="nav-contain">
			<view class="nav-contain-header">
				<view class="nav-contain-header-left">
					<view class="font-32">今日线索 {{ data.length }}</view>
					<view class="font-30" @click="openXs"><image src="../../static/sx.png" style="width: 25upx;height: 25upx;padding-right: 5upx;"></image>筛选</view>
				</view>
				<view class="nav-contain-header-right">
					<view @click="whole" class="nav-contain-header-right1">全部<image src="../../static/gd.png" style="width: 15upx;height: 15upx;padding-left: 10upx;"></image></view>
				</view>
			</view>
			<view class="nav-fl">
				<view v-for="(item,index) in list" :key="index">
					<view :class="curror == index ? 'nav-fl-div-ch' : 'nav-fl-div'" @click="getCurror(index, item.name)">{{ item.name }}</view>
				</view>
			</view>
			<view class="nav-bootom">
				<view class="nav-contain-bottom nav-contain-bottom1" v-if="item.status == name" v-for="(item,index) in data" :key="index" @click="Coursecontent(item.id, item.clue_agency_id)">
					<view class="top">
						<view class="font-24">分发日期：{{ item.create_data }}</view>
						<view class="font-24" style="color: #87B847;font-weight: bold;" v-if="item.status == '待处理'"><image src="../../static/ls.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>待处理</view>
						<view class="font-24" style="color: #F08200;font-weight: bold;" v-if="item.status == '考虑中'"><image src="../../static/ls1.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>考虑中</view>
						<view class="font-24" style="color: #F08200;font-weight: bold;" v-if="item.status == '已预约'"><image src="../../static/ls1.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>已预约</view>
						<view class="font-24" style="color: #F08200;font-weight: bold;" v-if="item.status == '已试听'"><image src="../../static/ls1.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>已试听</view>
						<view class="font-24" style="color: #E60012;font-weight: bold;" v-if="item.status == '无意向'"><image src="../../static/ls3.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>无意向</view>
						<view class="font-24" style="color: #0081F1;font-weight: bold;" v-if="item.status == '已报名'"><image src="../../static/ls2.png" style="width: 31upx;height: 24upx;margin-right: 8upx;"></image>已报名: 1436 元</view>
					</view>
					<view class="nav">
						<view>
							<view class="font-28">{{ item.unique_id }} {{ item.title }} {{ item.mobile }}</view>
							<view class="font-24" style="color: #666666;margin-top: 24upx;">{{ item.category_name_one }}-{{ item.category_name_two }}-{{ item.category_name_three }}</view>
						</view>
						<image src="../../static/gengduo.png" style="width: 28upx;height: 28upx;margin-right: 30upx;"></image>
					</view>
					<view class="bootom">
						<view class="bottom-address font-24">{{ item.province_name }}/{{ item.city_name }}/{{ item.area_name }}</view>
						<view class="font-24" style="margin-left: 22upx;"><image src="../../static/sj.png" style="width: 21upx;height: 21upx;margin-right: 5upx;"></image>{{ item.create_time }}</view>
						<view class="bottom-ff font-20">{{ item.send_count_text }}</view>
					</view>
				</view>
			</view>
		</view>
		<popup ref="child" @search="search" />
		<bottom/>
	</view>
</template>

<script>
	import popup from '../../components/popup/home.vue'
	import bottom from '../../components/bottom/index.vue'
	export default {
		components:{ bottom,popup },
		data() {
			return {
				data: [],
				title: 'Hello',
				curror: '0',
				name: '待处理',
				current: 1,
				param: {
					send_time: '',
					send_count: '',
					category: '',
					unique_id: '',
					realname: '',
					city: '',
					mobile: ''
				},
				list: [
					{
						name: '待处理'
					},
					{
						name: '无意向'
					},
					{
						name: '考虑中'
					},
					{
						name: '已预约'
					},
					{
						name: '已试听'
					},
					{
						name: '已报名'
					},
					{
						name: '疑似报名'
					}
				]
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			search (item) {
				this.getList(item)
			},
			getList (item) {
				this.param = item
					this.$request('', '/agencyApi/v1/agencyClueList', 'GET', this.param, {
					}).then(res => {
						this.data = res.data.data
						for (var i in this.data) {
							this.data[i].create_data = this.data[i].create_time.slice(0, 10)
							this.data[i].create_time = this.data[i].create_time.slice(11, 19)
							switch (this.data[i].status) {
								case 0:
								this.data[i].status = '待处理'
								break;
								case 1:
								this.data[i].status = '无意向'
								break;
								case 2:
								this.data[i].status = '考虑中'
								break;
								case 3:
								this.data[i].status = '已预约'
								break;
								case 4:
								this.data[i].status = '已试听'
								break;
								case 5:
								this.data[i].status = '已报名'
								break;
								case 6:
								this.data[i].status = '疑似报名'
								break;
							}
						}
						console.log(this.data)
					})
			},
			change(index) {
				this.current = index;
			},
			openXs () {
				this.$refs.child.getOpen()
			},
			getCurror(index, item){
				this.curror = index
				this.name = item
				console.log(this.name)
			},
			whole (){
				uni.navigateTo({
					url: '/pages/index/clouce'
				})
			},
			Workorder (){
				uni.navigateTo({
					url: '/pages/order/index'
				})
			},
			Coursecontent (id, clue_agency_id) {
				uni.navigateTo({
					url: '/pages/index/detail?id=' + id + '&clue_agency_id=' + clue_agency_id
				})
			},
			Coursecontents () {
				uni.navigateTo({
					url: '/pages/order/detail'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.font-36{
		font-size: 36upx;
		font-weight: bold;
	}
	.font-32{
		font-size: 36upx;
		font-weight: bold;
	}
	.font-30{
		color: #0087F2;
		font-size: 30upx;
		margin-left: 39upx;
		margin-top: 5upx;
		display: flex;
		align-items: center;
	}
	.font-24{
		font-size: 24upx;
	}
	.font-28{
		font-size: 28upx;
		font-weight: bold;
	}
	.font-20{
		font-size: 20upx;
	}
	.jg-index{
		width: 100%;
		padding-bottom: 7vh;
		overflow: hidden;
	}
	.vertical-offset{
		width: 1px;
		border: 1px solid #F7FCFF;
		margin-left: 270upx;
		margin-right: 44upx;
	}
	.content {
		height: 387upx;
		width: 100%;
		overflow: scroll;
		background-image: url(../../static/back.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		// display: flex;
		// flex-direction: column;
		.site-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 45upx;
			.site-header-left{
				color: #FFFFFF;
				.site-header-font{
					font-size: 24upx;
				}
			}
		}
		.subtransactions-header{
			width: 100%;
			display: flex;
			// justify-content: space-between;
			padding-left: 29upx;
			padding-right: 29upx;
			margin-top: 130upx;
			color: #FFFFFF;
		}
	}
	.nav-contain{
		height: 78vh;
		width: 100%;
		background-color: #FFFFFF;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: relative;
		bottom: 15upx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 50upx;
		// display: flex;
		.nav-contain-header{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.nav-contain-header-left{
				display: flex;
				// align-items: center;
			}
			.nav-contain-header-right{
				margin-top: 5upx;
				.nav-contain-header-right1{
					display: flex;
					align-items: center;
				}
			}
		}
		.nav-fl{
			width: 100%;
			overflow-y: scroll;
			display: flex;
			margin-bottom: 18upx;
			.nav-fl-div{
				width: 129upx;
				height: 49upx;
				font-size: 22upx;
				background-color: #F7FCFF;
				line-height: 47upx;
				text-align: center;
				border-radius: 8upx;
				margin-top: 38upx;
				color: rgba(102, 102, 102, 0.8);
				margin-left: 20upx;
			}
			.nav-fl-div-ch{
				width: 129upx;
				height: 48upx;
				font-size: 22upx;
				background-color: #FFFFFF;
				line-height: 45upx;
				text-align: center;
				border-radius: 8upx;
				margin-top: 38upx;
				color: #87B847;
				border: 1upx solid #87B847;
				margin-left: 20upx;
			}
		}
		.nav-bootom{
			height: 100%;
			padding-bottom: 70px;
			overflow-x: scroll;
			.nav-contain-bottom1{
				border: 1upx solid #87B847;
			}
			.nav-contain-bottom{
				width: 690upx;
				background: #F7FCFF;
				border-radius: 10px;
				margin-top: 26upx;
				padding: 24upx;
				margin-bottom: 20upx;
				.top{
					display: flex;
					justify-content: space-between;
				}
				.nav{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 27upx;
				}
				.bootom{
					display: flex;
					margin-top: 42upx;
					align-items: center;
					// margin-top: ;
					// padding-bottom: 10upx;
					.bottom-address{
						// width: 193upx;
						height: 43upx;
						border: 1upx solid #AAAAAA;
						border-radius: 6upx;
						text-align: center;
						line-height: 40upx;
					}
					.bottom-ff{
						width: 110upx;
						height: 40upx;
						background: rgba(0, 129, 243, 0.1);
						border-radius: 10upx;
						color: #0081F1;
						text-align: center;
						line-height: 40upx;
						margin-left: 23upx;
					}
				}
			}
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
